<template>
    <div style="padding: 20px;">
        <el-row justify='center'>
            <el-col :span="8">
                <div>
                    <div id="pie-member-message" style="width: 100%; height: 480px;"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <div id="pie-chat-message" style="width: 100%; height: 480px;"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <div id="pie-like-message" style="width: 100%; height: 480px;"></div>
                </div>
            </el-col>
        </el-row>
        <el-row justify='center'>
            <el-col :span="12">
                <div>
                    <div id="pie-social-message" style="width: 100%; height: 380px;"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <div id="pie-gift-message" style="width: 100%; height: 380px;"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineProps } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

import * as echarts from 'echarts';

const { appContext } = getCurrentInstance();
const HOST_URL = appContext.config.globalProperties.$HOST_URL;
const props = defineProps({
    room_id: String,
    analyzed_date: String
});

let genderAllList = ref([]);

let pieChatMessage = null;
let pieGiftMessage = null;
let pieLikeMessage = null;
let pieMemberMessage = null;
let pieSocialMessage = null;
const initChart = () => {
    pieChatMessage = echarts.init(document.getElementById('pie-chat-message'));
    pieGiftMessage = echarts.init(document.getElementById('pie-gift-message'));
    pieLikeMessage = echarts.init(document.getElementById('pie-like-message'));
    pieMemberMessage = echarts.init(document.getElementById('pie-member-message'));
    pieSocialMessage = echarts.init(document.getElementById('pie-social-message'));
};

const fetchGenderAllList = async (roomId, roomDate) => {
    try {
        const response = await axios.get(`${HOST_URL}/chart/room/gender/all_list`, { params: { room_id: roomId, analyze_time: roomDate } });
        genderAllList.value = response.data;
    } catch (error) {
        ElMessage.error('后端请求失败');
        console.error('请求失败:', error);
    }
};

const getGenderOption = (titleData, maleData, womanData) => {
    var option = {
        title: {
            text: titleData,
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)' // 显示百分比
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: maleData, name: '男性' },
                    { value: womanData, name: '女性' },
                ]
            }
        ]
    };
    return option;
};

const runGenderPie = () => {
    genderAllList.value.forEach(item => {
        if (item.table === '聊天占比') {
            pieChatMessage.setOption(getGenderOption(item.table, item.male, item.woman));
        }
        if (item.table === '礼物占比') {
            pieGiftMessage.setOption(getGenderOption(item.table, item.male, item.woman));
        }
        if (item.table === '点赞占比') {
            pieLikeMessage.setOption(getGenderOption(item.table, item.male, item.woman));
        }
        if (item.table === '进入占比') {
            pieMemberMessage.setOption(getGenderOption(item.table, item.male, item.woman));
        }
        if (item.table === '关注占比') {
            pieSocialMessage.setOption(getGenderOption(item.table, item.male, item.woman));
        }
    });
};


onMounted(() => {
    initChart();
    fetchGenderAllList(props.room_id, props.analyzed_date);
})


watch(genderAllList, (newData) => {
    if (newData) {
        runGenderPie();
    }
});

// 监听父组件传递的参数变化
watch(() => props.analyzed_date, (newDate) => {
    if (newDate) {
        fetchGenderAllList(props.room_id, newDate);
    }
});

</script>

<style scoped lang="scss"></style>